<template>
  <div class="ItemScreening">
    <div class="item" :class="{'HOVERITEM':fColor==1}" @click="F_R(1)">
      <span>推荐</span>
    </div>
    <div class="item" :class="{'HOVERITEM':fColor==2}" @click="F_R(2)">
      <span>价格从高到底</span>
    </div>
    <div class="item" :class="{'HOVERITEM':fColor==3}" @click="F_R(3)">
      <span>价格从低到高</span>
    </div>
    <div class="f-r itemRight">
      <div class="block">
        <el-pagination
          small
          :page-size="this.$store.state.commonDATA.pageSize"
          :total="this.$store.state.commonDATA.total"
          :current-page="this.$store.state.commonDATA.pageNum"
          @current-change="handleCurrentChange"
          layout="prev, pager, next,jumper"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  data() {
    return {
      fColor: 1,
      JGPX: true
    };
  },
  created: function() {
    this.fColor = JSON.parse(sessionStorage.getItem("orderStatus"));
  },
  methods: {
    F_R(index) {
      this.fColor = index;
      this.$store.commit("orderStatusUpdata", index);
      // 成功返回数据
      
      this.$api.commonAPI
        .getElectricCars({
          list: this.$store.state.commonDATA.groDATA.getlist,
          pageNum: this.$store.state.commonDATA.pageNum,
          priceMax: this.$store.state.commonDATA.groDATA.JGmax,
          priceMin: this.$store.state.commonDATA.groDATA.JGmin,
          orderStatus: this.$store.state.commonDATA.orderStatus
        })
        .then(res => {});
    },
    handleCurrentChange(val) {
      this.$store.commit("pageNumUpdata", val);
      this.$api.commonAPI
        .getElectricCars({
          list: this.$store.state.commonDATA.groDATA.getlist,
          pageNum: this.$store.state.commonDATA.pageNum,
          priceMax: this.$store.state.commonDATA.groDATA.JGmax,
          priceMin: this.$store.state.commonDATA.groDATA.JGmin,
          orderStatus: this.$store.state.commonDATA.orderStatus
        })
        .then(res => {});
    }
  },
  components: {}
};
</script>


<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
.ItemScreening {
  $he: 25px;
  padding: 5px 5px;
  height: $he;
  background-color: rgb(241, 241, 241);
  .item {
    float: left;
    width: 150px;
    text-align: center;
    line-height: $he;
    cursor: pointer;
    background-color: white;
    margin-right: 4px;
    font-size: 15px;
  }
  .item:hover {
    color: white;
    background-color: $main-color12;
  }
  .HOVERITEM {
    color: white;
    background-color: $main-color12;
  }
  .ico1,
  .ico2 {
    font-size: 20px;
    width: 40px;
  }
}
</style>
